<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            /* 默认背景为黑色 */
            background: #fff;
        }
        .video-wrap {
            position: relative;
            width: 80%;
            padding-top: 62.5%;
            /* 62.5% = 9 / 16 ，对应一般的视频横宽比 */
        }
        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            background: #fff;
        }

        video.layer {
            position: absolute;
            top: 0;
            left: 0;
            /* margin: auto; */
            height: 20000px !important;
            /* height值要大于或等于屏幕高度 */
            object-fit: contain;
            object-position: 0px 0px;
        }

        .long {
            height: 1000px;
            background: red;
        }
        .long p {
            line-height: 20px;
        }
        .up {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            /* height: 50px; */
            background: red;
        }
    </style>
</head>
<body>
    <div class="video-wrap">
        <video 
            src="./exp.mp4" 
            x5-video-player-type="h5" 
            x5-video-player-fullscreen="true" 
            x5-video-orientation="portrait" 
            controls
            loop
        ></video>
    </div>
    <div class="up" onclick="alert('你点了')">当开始播放后，这个div可以显示，并且可以点击</div>
    <p>这里在video外包一层div的目的是，让video-wrap的高度是视频的高度，防止因为视频高度大于等于屏幕高度造成视频后面的内容显示不下</p>

    <p id="x5"></p>

    <p style="line-height: 20px; height: 90px; overflow-y: auto; border: 1px solid blue;">
        同层模式：如果安装了x5, 进入同层后， <br>
        1. 页面上方会有返回按钮和设置按钮 <br>
        2. 视频不处于最上层，但是视频的控制条(指video的controls属性生成的控制条)会消失。因为视频不处于最上层，所以可以放弹幕和自定义的控制条<br>
        3. 页面的宽度为视频的宽度，如果视频的宽度小于屏幕宽度，那么页面两边会有黑边，且部分黑边部分应该显示的内容不显示 <br>
        4. 页面document无法滑动，也就是说，如果页面很长，下面的内容就看不到了 <br>
        5. div内如果overflow为scroll/auto还是可以滑动的，就像现在这个div
    </p>

    <div class="long">
        <p>同层下，document页面无法下滑1</p>
        <p>同层下，document页面无法下滑2</p>
        <p>同层下，document页面无法下滑3</p>
        <p>同层下，document页面无法下滑4</p>
        <p>同层下，document页面无法下滑5</p>
        <p>同层下，document页面无法下滑6</p>
        <p>同层下，document页面无法下滑7</p>
        <p>同层下，document页面无法下滑8</p>
        <p>同层下，document页面无法下滑9</p>
        <p>同层下，document页面无法下滑10</p>
        <p>同层下，document页面无法下滑11</p>
        <p>同层下，document页面无法下滑12</p>
        <p>同层下，document页面无法下滑13</p>
        <p>同层下，document页面无法下滑14</p>
        <p>同层下，document页面无法下滑15</p>
        <p>同层下，document页面无法下滑16</p>
        <p>同层下，document页面无法下滑17</p>
        <p>同层下，document页面无法下滑18</p>
        <p>同层下，document页面无法下滑19</p>
        <p>同层下，document页面无法下滑20</p>
    </div>

    
    <script src="./x5.js"></script>
    <script>
        document.getElementById('x5').innerHTML = '是否安装了tbs/x5: ' + (isX5() ? '是' : '否')
    </script><script>
        var video = document.querySelector('video')
        isX5() && video.addEventListener('play', function () {
            video.className = 'layer'
        })
        isX5() && video.addEventListener('pause', function () {
            video.className = ''
        })
    </script>
</body>
</html>


<script>

var video = document.createElement('video')
video.setAttribute('controls', '')
video.setAttribute('x5-video-player-type', 'h5')
video.setAttribute('x5-video-player-fullscreen', 'true')
video.setAttribute('x5-video-orientation', 'portrait')
document.body.appendChild(video)
</script>